<template>
    <div class="shopmsg">
    <div class="imgbox">
      <img
        src="../../../static/images/market/detail/banner1.jpg"
      />
      <span class="price">￥25</span>
      <p>已选：500g*2袋</p>
    </div>
    <div class="size">
      <button class="size1">500g*1袋</button>
      <button class="size2">500g*2袋</button>
    </div>
    <div class="number">
      <span class="num">数量</span>
      <div class="count">
        <button @click="reduce">-</button><input type="text" value="1" v-model="this.$store.state.count"/><button @click="add">+</button>
      </div>
    </div>
    <a href="#" class="confirm" @click="submits">确定</a>
  </div>
</template>

<script>
export default {
    data(){
        return{
         msgList:[],
        }
    },
    mounted(){

        this.$axios.get("../../../static/json/shopCarMsg.json").then(res=>{
            this.msgList=res.data;
        })


    },
    methods:{
        submits(){
          this.$store.state.isShowShopCar=false;
          this.$store.state.shopCarList.push(this.msgList);
          localStorage.setItem("shopNum",this.$store.state.shopCarList.length);
        },
        reduce(){
          if(this.$store.state.count>1){
            this.$store.state.count--;
          }else{
            this.$store.state.count=1
          }
        },
        add(){
           this.$store.state.count++;
        }
    }

};
</script>

<style scoped lang="less">
//加入购物车页面
.shopmsg {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  height: 10rem;
  background-color: #fff;
  .imgbox {
    width: 100%;
    height: 2rem;
    position: relative;
    img {
      width: 2rem;
      height: 2rem;
        position: absolute;
        left: .2rem;
        top:  .5rem;
    }
    .price{
        position: absolute;
        left: 2.5rem;
        bottom:.3rem;
        color: red;
    }
    p{
        position: absolute;
        left: 2.5rem;
        bottom:-.6rem;
    }
  }
    .size{
        width: 100%;
        height: .6rem;
        margin-top: .8rem;
        .size1,.size2{
            display: inline-block;
            margin-top: .1rem;
            margin-left: 0px;
            border: none;
            outline: none;
            background-color: #e7eaed;
            width: 1.5rem;
            line-height: .4rem;
            margin-left: .2rem;
        }
        .size1{
            color:#fff;
            background-color: red;
        }
    }
    .number{
        width: 100%;
        display: flex;
        height: .5rem;
        margin-top: .3rem;
        .num{
            flex: 1;
            width: .6rem;
            line-height: .5rem;
            background-color: rd;
            text-align: left;
            text-indent: .2rem;
        }
        .count{
             flex: 1;
            width: 40%;
            button,input{
                display: inline-block;
                width: .5rem;
                text-align: center;
                height: .5rem;
                line-height: .2rem;
                border: none;
                outline: none;
                border: 1px #ccc solid;
                box-sizing: border-box;
            }
            button:hover{
                color: red;
            }
        }
    }
    .confirm{
        width: 95%;
        height: .6rem;
        line-height: .6rem;
        color:#fff;
        text-align: center;
        background-color:#fb6650;
        margin-top: 2.5rem;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>